<!-- Start: Template Tab -->
<div class="tabcontent">
    <div id="tabTemplate">
        <div class="actions floatleft">
            <a href="" class="button" id="action_RefreshPlaylists" title="Refresh Playlists" ng-click="getPlaylists()"><img class="pad" src="images/reload_9x11.png" /></a>
        </div>
        <div class="subactions">
            <a href="" class="button" id="action_NewPlaylist" title="New Playlist" ng-click="newPlaylist()">+ New</a>
            <a href="" class="button" id="action_DeletePlaylist" title="Delete Selected Playlist" ng-click="deletePlaylist()">Delete</a>
            <a href="" class="button" id="action_SavePlaylist" title="Save Playlist" ng-click="savePlaylist()">Save</a>
            <a href="" class="button" id="action_RemoveMediaElements" title="Remove selected track(s) from playlist" ng-click="removeSelectedMediaElements()">Remove Track(s)</a>
        </div>
        <div class="clear"></div>
        <div id="LayoutContainer" class="section lgsection">
            <!-- Playlists -->
            <div class="ui-layout-west noselect hide" tabindex="0">
                <ul class="simplelist mainlist noselect">
                    <li class="index" id="auto">Auto Playlists</li>
                    <li class="index" id="auto">Genre Playlists</li>
                        <option value="">[Select Genre]</option>
                    </select>
                </ul>
                <ul class="simplelist mainlist noselect">
                    <li class="index" id="folder">Folder Playlists</li>
                </ul>
                <ul class="simplelist mainlist noselect" >
                    <li class="index" id="auto">My Playlists</li>
                    <li class="item" ng-repeat="o in playlists" ng-click="getPlaylist(o.id, '')" ng-class="{'selected': o.id == selectedPlaylist}">
                        <div class="itemactions">
                            <a class="add" href="" title="Add To Play Queue" ng-click="getPlaylist(o.id, 'add')" stop-event="click"></a><a class="play" href="" title="Play" ng-click="getPlaylist(o.id, 'play')" stop-event="click"></a>
                        </div>
                        <div class="title" title="{{'Tracks: ' + o.mediaElementCount + ', Public: ' + o.public}}">{{o.name}}</div>
                    </li>
                </ul>
                <ul class="simplelist mainlist noselect" >
                    <li class="index" id="auto">Shared Playlists</li>
                    <li class="item" ng-repeat="o in playlistsPublic" ng-click="getPlaylist(o.id, '')" ng-class="{'selected': o.id == selectedPlaylist}">
                        <div class="itemactions">
                            <a class="add" href="" title="Add To Play Queue" ng-click="getPlaylist(o.id, 'add')" stop-event="click"></a><a class="play" href="" title="Play" ng-click="getPlaylist(o.id, 'play')" stop-event="click"></a>
                        </div>
                        <div class="title" title="{{'Owner: ' + o.owner + ' Tracks: ' + o.mediaElementCount}}">{{o.name}}</div>
                    </li>
                </ul>
            </div>
            <!-- Media Elements -->
            <div class="ui-layout-center noselect hide" ng-include src="'js/partials/mediaElements.html'"></div>
        </div>
    </div>
<div class="clear"></div>
</div>
<!-- End: Library Tab -->